<template>
  <div>
    <div class="form-group">
      <!--头部搜索工作栏-->
      <div class="header-search">
        <div class="header-left">
          <span class="fold-span" :style="{ borderColor: foldPanelShow ? '#2a67f4' : '#e3e5e8' }"
            @click="foldTreeEvent()">
            <svg-icon :icon-class="foldPanelShow ? 'process-all' : 'process-all-hide'"
              class="svg-icon-size-one svg-icon-margin-one"></svg-icon>
          </span>
        </div>
        <div class="header-right">
          <el-button type="success" style="width: 132px; margin-right: 10px"
            @click="handleAdd"><svg-icon icon-class="process-create"
              class="svg-icon-size-one svg-icon-margin" />新建</el-button>
          <el-dropdown trigger="click">
            <el-button type="info" plain style="width: 132px; margin-right: 10px"><svg-icon
                icon-class="batch-operation" class="svg-icon-size-one svg-icon-margin" />批量操作<i
                class="el-icon-arrow-down el-icon--right"></i></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="batchDelete">批量删除</el-dropdown-item>
              <el-dropdown-item @click.native="batchRemove">批量移动</el-dropdown-item>
              <el-dropdown-item @click.native="batchCopy">批量复制</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-input placeholder="搜索表单名称" style="width: 240px" v-model="queryParams.name"
            @keyup.enter.native="getList" @blur="getList">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
      </div>
      <!--内容工作栏-->
      <div class="main-content">
        <div class="left-tree" v-show="foldPanelShow">
          <span class="form-group-title">
            <span>表单分组</span>
            <!-- <svg-icon
              icon-class="batch-operation"
              class="svg-icon-size-two process-sort-icon"
            /> -->
          </span>
          <el-input placeholder="搜索分组" v-model="filterText">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-scrollbar style="min-height: 300px; max-height: 500px; margin-bottom: 100px">
            <el-tree v-loading="formGroupOperate.loading" class="filter-tree" :data="treeData"
              :props="defaultProps" :filter-node-method="filterNode" :expand-on-click-node="false"
              :highlight-current="true" :current-node-key="currentFormGroupId"
              :default-expanded-keys="expandedKeys" ref="tree" node-key="encode" accordion
              @node-click="nodeClicked">
              <span class="custom-tree-node" slot-scope="{ node, data }"
                @mouseover="mouseover(data)" @mouseout="mouseout(data)">
                <span :style="{
                  color: data.encode == currentFormGroupId ? '#0047ea' : '',
                  width: '100px',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                }" :title="node.label">{{ node.label }}</span>
                <span class="mouseover-span">
                  <el-button v-show="data.nodeShow" type="text" size="mini"
                    @click="($event) => append($event, data, 'create')">
                    <i class="el-icon-plus"></i>
                  </el-button>
                  <el-button v-show="data.deleteShow" type="text" size="mini"
                    @click="($event) => editGroup($event, data, 'edit')">
                    <i class="el-icon-edit"></i>
                  </el-button>
                  <el-button v-show="data.deleteShow" type="text" size="mini"
                    @click="($event) => remove($event, node, data)">
                    <i class="el-icon-delete"></i>
                  </el-button>
                </span>
              </span>
            </el-tree>
          </el-scrollbar>

          <div class="create-root-name" @click="createRootGroup">
            <svg-icon icon-class="process-add-name" class="svg-icon-size-two" />
            <span>新建分组</span>
          </div>
        </div>
        <div class="right-table">
          <!-- 列表 -->
          <div>
            <el-table ref="table" v-loading="loading" :data="list"
              @selection-change="handleSelectionChange" :cell-style="cellStyle">
              <el-table-column type="selection" width="50" />
              <el-table-column label="序号" align="center" width="50">
                <template slot-scope="scope"> {{ scope.$index + 1 }} </template>
              </el-table-column>
              <el-table-column label="表单名" align="center" prop="name">
                <template v-slot="scope">
                  <span class="link-type" @click="handleDetail(scope.row)">{{
                    scope.row.name
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="formGroupName" label="所属分组" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.formGroupName || "-" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="版本号" align="center" prop="version" />
              <el-table-column label="开启状态" align="center" prop="status">
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 0" class="open-doing">设计中</span>
                  <span v-else-if="scope.row.status == 1">
                    启用
                    <el-switch v-model="scope.row.status" active-color="#30BB2F"
                      inactive-color="#B8BEC7" :active-value="Number(1)" :inactive-value="Number(2)"
                      @change="handleChangeStatus(scope.row)">
                    </el-switch>
                  </span>
                  <span v-else>
                    停用
                    <el-switch v-model="scope.row.status" active-color="#30BB2F"
                      inactive-color="#B8BEC7" :active-value="Number(1)" :inactive-value="Number(2)"
                      @change="handleChangeStatus(scope.row)">
                    </el-switch>
                  </span>
                </template>
              </el-table-column>
              <!-- <el-table-column
                label="操作用户"
                align="center"
                prop="updateName"
              /> -->
              <el-table-column label="更新时间" align="center" prop="updateTime" width="180">
                <template v-slot="scope">
                  <span>{{ parseTime(scope.row.updateTime) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="表单描述" align="center" prop="remark" />
              <el-table-column label="操作" align="center" width="150" column-key="1">
                <template v-slot="scope">
                  <!-- <el-button
                    type="text"
                    icon="el-icon-monitor"
                    @click="handleDetail(scope.row)"
                    v-hasPermi="['bpm:model:update']"
                    class="svg-icon-margin"
                    >预览</el-button
                  > -->
                  <el-button type="text" icon="el-icon-edit-outline"
                    @click="handleUpdate(scope.row)" class="svg-icon-margin">设计</el-button>
                  <el-dropdown trigger="click">
                    <el-button type="text" v-hasPermi="['bpm:model:update']"><svg-icon
                        icon-class="more" class="svg-icon-size-three"
                        style="margin-left: 10px" /></el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="handleEdit(scope.row)">
                        <span><i class="el-icon-document"></i>基本信息</span></el-dropdown-item>
                      <el-dropdown-item @click.native="handlePublish(scope.row)">
                        <span><i class="el-icon-position"></i>发布</span></el-dropdown-item>
                      <el-dropdown-item @click.native="singleRemove(scope.row)">
                        <span><svg-icon icon-class="file-remove" class="svg-icon-size-one"
                            style="margin-right: 3px" />移动至</span></el-dropdown-item>
                      <el-dropdown-item @click.native="singleDelete(scope.row)">
                        <span style="color: red"><svg-icon icon-class="file-delete"
                            class="svg-icon-size-one"
                            style="margin-right: 3px" />删除</span></el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <!-- 分页组件 -->
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo"
        :limit.sync="queryParams.pageSize" @pagination="getList"
        style="padding: 32px 16px !important" />
    </div>
    <!-- 流程表单配置详情 -->
    <el-dialog title="表单详情" :visible.sync="detailOpen" width="80%" append-to-body center>
      <parser :key="new Date().getTime()" :form-conf="detailForm" />
    </el-dialog>
    <!-- 新建/编辑表单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body center>
      <el-form ref="createForm" :model="formOperate.form" :rules="formOperate.rules"
        label-width="110px">
        <el-form-item label="表单名称" prop="name">
          <el-input v-model="formOperate.form.name" placeholder="请输入表单名称" clearable />
        </el-form-item>
        <el-form-item label="表单分组" prop="category" v-if="!formOperate.form.id">
          <el-cascader v-model="formOperate.form.category" placeholder="请选择表单分组" clearable
            style="width: 100%" :options="treeData" :props="defaultCascaderProps"
            @change="getCheckedNode" ref="cascader"></el-cascader>
        </el-form-item>
        <el-form-item label="表单描述">
          <el-input type="textarea" v-model="formOperate.form.remark" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelCreate" type="info" plain>取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <!--批量删除对话框-->
    <el-dialog :visible.sync="operateBtn.deleteDialog" width="500px" append-to-body center>
      <template slot="title">
        <svg-icon icon-class="warning-icon" class="svg-icon-size-two" /><span
          class="batch-delete">批量删除</span></template>
      <div class="batch-delete-content">
        <span>
          是否要删除所选中的【{{ this.operateBtn.selected.length }}】条表单？
        </span>
        <span>该分组下所有表单将被清空且不可恢复！</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDelete" type="info" plain>取 消</el-button>
        <el-button type="primary" @click="submitDelete">确 定</el-button>
      </div>
    </el-dialog>
    <!--批量移动对话框-->
    <el-dialog title="移动至" :visible.sync="operateBtn.removeDialog" width="500px" append-to-body
      center>
      <div class="batch-remove-content">
        <span> 将选中的分组移动至： </span>
        <el-cascader v-model="operateBtn.category" placeholder="请选择表单分组" clearable
          style="width: 100%" :options="treeData" :props="defaultCascaderProps"></el-cascader>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelRemove" type="info" plain>取 消</el-button>
        <el-button type="primary" @click="submitRemove">确 定</el-button>
      </div>
    </el-dialog>
    <!--批量复制对话框-->
    <el-dialog title="复制表单" :visible.sync="operateBtn.copyDialog" width="500px" append-to-body
      center>
      <div class="batch-delete-content">
        <span> 是否将选中表单复制到当前分组？ </span>
        <span>分组后前版本号加1</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelCopy" type="info" plain>取 消</el-button>
        <el-button type="primary" @click="submitCopy">确 定</el-button>
      </div>
    </el-dialog>
    <!--新建表单分组对话框-->
    <el-dialog :title="formGroupOperate.title" :visible.sync="formGroupOperate.showDialog"
      width="500px" center>
      <el-form ref="formGroup" :model="formGroupOperate.form" :rules="formGroupOperate.rules"
        label-width="110px">
        <el-form-item label="父分组：" v-show="formGroupOperate.form.isShow">
          <el-input v-model="formGroupOperate.form.parentName" disabled />
        </el-form-item>
        <el-form-item label="分组名称：" prop="nameGroup">
          <el-input v-model="formGroupOperate.form.nameGroup" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelFormGroup" type="info" plain>取 消</el-button>
        <el-button type="primary" @click="submitFormProcessGroup">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getTreeList,
  create,
  update,
  deleteGroup,
  updateStatus,
  updateName,
  updateCategorys,
} from "@/api/bpm/formGroup";
import { DICT_TYPE, getDictDatas } from "@/utils/dict";
import {
  getForm,
  getFormPage,
  copyFormDo,
  deleteForm,
  createForm,
  updateForm,
} from "@/api/bpm/form";
import { decodeFields } from "@/utils/formGenerator";
import Parser from "@/components/parser";
import { getBaseHeader } from "@/utils/request";
import taskAssignRuleDialog from "../taskAssignRule/taskAssignRuleDialog";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { status } from "nprogress";

export default {
  name: "BpmManagerForm",
  components: {
    Parser,
    Treeselect,
    taskAssignRuleDialog,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 查询参数
      queryParams: {
        name: "",
        pageNo: 1,
        pageSize: 10,
      },

      // BPMN 数据
      showBpmnOpen: false,
      bpmnXML: null,
      bpmnControlForm: {
        prefix: "flowable",
      },

      // 流程表单详情
      detailOpen: false,
      detailForm: {
        fields: [],
      },

      // 流程表单
      title: "",
      open: false,
      form: {},
      // 表单校验
      rules: {
        key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }],
        name: [
          { required: true, message: "流程名称不能为空", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "名称长度在1到50个字符",
            trigger: "blur",
          },
        ],
        formId: [
          { required: true, message: "业务表单不能为空", trigger: "blur" },
        ],
        category: [
          { required: true, message: "流程分类不能为空", trigger: "blur" },
        ],
        processType: [
          { required: true, message: "流程名称不能为空", trigger: "blur" },
        ],
        formCustomCreatePath: [
          { required: true, message: "表单提交路由不能为空", trigger: "blur" },
        ],
        formCustomViewPath: [
          { required: true, message: "表单查看路由不能为空", trigger: "blur" },
        ],
      },

      // 流程导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: getBaseHeader(),
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/admin-api" + "/bpm/model/import",
        // 表单
        form: {},
        // 校验规则
        rules: {
          key: [
            { required: true, message: "流程标识不能为空", trigger: "blur" },
          ],
          name: [
            { required: true, message: "流程名称不能为空", trigger: "blur" },
            {
              min: 1,
              max: 50,
              message: "名称长度在1到50个字符",
              trigger: "blur",
            },
          ],
        },
      },
      // 流程表单的下拉框的数据
      forms: [],

      // 复制流程
      copy: {
        selected: [],
        showDialog: false,
        form: {
          name: "",
          versionNo: "",
          groupId: "",
          description: "",
        },
        rules: {
          name: [
            { required: true, message: "流程名称不能为空", trigger: "blur" },
            {
              min: 1,
              max: 50,
              message: "名称长度在1到50个字符",
              trigger: "blur",
            },
          ],
          groupId: [
            { required: true, message: "流程分组不能为空", trigger: "blur" },
          ],
          versionNo: [
            { required: true, message: "流程分类不能为空", trigger: "blur" },
          ],
        },
      },
      //批量删除弹出框
      operateBtn: {
        selected: [],
        deleteDialog: false,
        removeDialog: false,
        copyDialog: false,
        category: "",
      },
      //批量移动弹出框
      // 数据字典
      modelProcessTypeDictDatas: [
        { label: "主流程", value: 1 },
        { label: "子流程", value: 0 },
      ],
      categoryDictDatas: [],
      modelFormTypeDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_FORM_TYPE),
      taskAssignRuleDictDatas: getDictDatas(
        DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE
      ),
      filterText: "",
      treeData: [{ encode: "" }],
      defaultCascaderProps: {
        label: "nameGroup",
        value: "encode",
        checkStrictly: true,
      },
      defaultProps: {
        children: "children",
        label: "nameGroup",
      },
      foldPanelShow: true,
      //当前表单分组是新建分组还是编辑分组
      currentGroupOperateState: "",
      //新建表单分组弹出框
      formGroupOperate: {
        loading: false,
        showDialog: false,
        form: {}, //表单数据
        rules: {
          nameGroup: [
            { required: true, message: "分组名称不能为空", trigger: "blur" },
            {
              min: 1,
              max: 50,
              message: "名称长度在1到50个字符",
              trigger: "blur",
            },
          ],
        },
      },
      //新建表单弹出框
      formOperate: {
        form: { name: "", category: "", remark: "" }, //表单数据
        rules: {
          name: [
            { required: true, message: "表单名称不能为空", trigger: "blur" },
            {
              min: 1,
              max: 50,
              message: "名称长度在1到50个字符",
              trigger: "blur",
            },
          ],
          category: [
            { required: true, message: "表单分组不能为空", trigger: "change" },
          ],
        },
      },
      //当前页面选中的流程分组
      currentFormGroupId: "",
      rootNodeData: "",
      expandedKeys: [],
      isInitTree: true,
      parentList: [],
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    //当前选中的流程分组
    // currentFormGroupId(val) {
    //   this.getList();
    // },
    $route(to, from) {
      if (from.path == "/bpm/manager/form/edit") {
        this.getList();
      }
    }
  },
  created() {
    // //获取表单分组树形数据
    this.getTreeList();
    this.getList();
  },
  mounted() { },
  methods: {
    getTreeList() {
      this.formGroupOperate.loading = true;
      let _this = this;
      getTreeList()
        .then((res) => {
          this.treeData = res.data.length > 0 ? this.getTreeData(res.data) : [];
          this.formGroupOperate.loading = false;
          this.rootNodeData = res.data.length > 0 ? this.treeData[0].id : 222;
        })
        .then(() => {
          this.$nextTick(() => {
            if (_this.isInitTree) {
              _this.expandedKeys = [_this.treeData[0].encode];
              _this.currentFormGroupId = _this.treeData[0].encode;
              _this.parentList = [_this.currentFormGroupId];
              _this.$refs.tree.setCurrentKey(_this.currentFormGroupId);
              _this.isInitTree = false;
            }
          });
        });
    },
    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.nameGroup.indexOf(value) !== -1;
    },
    /** 查询表单列表 */
    getList() {
      this.loading = true;
      this.queryParams.category = this.currentFormGroupId;
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(this.currentFormGroupId);
        this.expandedKeys = [this.currentFormGroupId];
      });
      // 执行查询
      getFormPage(this.queryParams).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 取消按钮 */
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        key: undefined,
        name: undefined,
        description: undefined,
        category: undefined,
        formType: undefined,
        formId: undefined,
        formCustomCreatePath: undefined,
        formCustomViewPath: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    cellStyle() {
      return "cursor:pointer";
    },
    /** 详情按钮操作 */
    handleDetail(row) {
      // if (column.columnKey == "1") return;
      getForm(row.id).then((response) => {
        // 设置值
        const data = response.data;
        this.detailForm = {
          ...JSON.parse(data.conf),
          fields: decodeFields(data.fields),
        };
        // 弹窗打开
        this.detailOpen = true;
      });
    },
    /** 新增按钮操作 */
    handleAdd() {
      // this.formOperate.form = { name: "", category: "", remark: "" };
      this.formOperate.form.formConf = "";
      this.formOperate.form.fields = [];
      this.formOperate.form.status = 0;
      this.formOperate.form.category = this.parentList;
      this.title = "新建表单";
      this.open = true;
    },
    /**基本信息-表单编辑 */
    handleEdit(row) {
      this.formOperate.form.name = row.name;
      this.formOperate.form.remark = row.remark;
      this.formOperate.form.id = row.id;
      this.formOperate.form.status = row.status;
      this.title = "表单信息";
      this.open = true;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      updateStatus({
        id: row.id,
        status: 0,
      });
      //页面跳转前先把状态更改为设计中
      this.$router.push({
        path: "/bpm/manager/form/edit",
        query: {
          formId: row.id,
        },
      });
    },
    /**发布操作事件 */
    handlePublish(row) {
      let params = {};
      params.id = row.id;
      params.status = 1;
      updateStatus(params).then((res) => {
        this.$message.success("发布成功");
        this.getList();
      });
    },
    handleChangeStatus(row) {
      updateStatus({ id: row.id, status: row.status }).then((res) => {
        this.$message.success("切换成功");
        this.getList();
      });
    },
    /**流程分组添加提交操作 */
    submitFormProcessGroup() {
      this.$refs["formGroup"].validate((valid) => {
        if (!valid) {
          return;
        }
        let params = {};
        if (this.currentGroupOperateState == "create") {
          params.creatNameGroup = this.formGroupOperate.form.nameGroup;
          params.idParent = this.formGroupOperate.form.idParent;
          params.parentLevels = this.formGroupOperate.form.parentLevels;
          create(params).then((res) => {
            this.$modal.msgSuccess("创建成功");
            this.formGroupOperate.showDialog = false;
            this.getTreeList();
          });
        } else if (this.currentGroupOperateState == "edit") {
          params.nameGroup = this.formGroupOperate.form.nameGroup;
          params.id = this.formGroupOperate.form.id;
          update(params).then((res) => {
            this.$modal.msgSuccess("更新成功");
            this.cancelFormGroup();
          });
        }
      });
    },
    cancelFormGroup() {
      this.formGroupOperate.showDialog = false;
      this.formGroupOperate.form = {};
      this.getTreeList();
      this.$refs["formGroup"].resetFields();
    },
    /**新建表单事件 */
    submitForm() {
      this.$refs["createForm"].validate((valid) => {
        if (!valid) {
          return;
        }
        let params = {};
        if (this.formOperate.form.id) {
          params.id = this.formOperate.form.id;
          params.Name = this.formOperate.form.name;
          params.remark = this.formOperate.form.remark;
          updateName(params).then((res) => {
            this.$modal.msgSuccess("修改成功");
            this.cancelCreate();
          });
        } else {
          params = this.formOperate.form;
          params.status = this.formOperate.form.status;
          params.formGroupId = this.formOperate.form.formGroupId;
          params.category =
            this.formOperate.form.category[
            this.formOperate.form.category.length - 1
            ];
          params.conf = JSON.stringify(this.formOperate.form.formConf); // 表单配置
          params.fields = this.encodeFields(); // 表单项的数组
          createForm(params).then((res) => {
            this.currentFormGroupId = params.category;
            this.parentList = this.formOperate.form.category;
            this.$modal.msgSuccess("新增成功");
            this.cancelCreate();
          });
        }
      });
    },
    getCheckedNode(val) {
      var aa = this.$refs.cascader.getCheckedNodes()[0];
      this.formOperate.form.formGroupId = aa.data.id;
    },
    encodeFields() {
      const fields = [];
      let drawingList = decodeFields(this.formOperate.form.fields);
      drawingList.forEach((item) => {
        if (item.__config__.dataType === "dynamic") {
          setObjectValueReduce(item, item.__config__.dataConsumer, []); // 动态数据，不需要保存当前数据，后续渲染通过接口获取，避免存储不必要的大量数据
        }
        fields.push(JSON.stringify(item));
      });
      return fields;
    },
    /** 关闭新建弹窗 */
    cancelCreate() {
      this.$refs["createForm"].resetFields();
      this.open = false;
      this.formOperate.form.name = "";
      this.formOperate.form.remark = "";
      this.formOperate.form.category = this.parentList;
      this.getList();
    },
    handleSelectionChange(val) {
      this.operateBtn.selected = val;
    },
    //批量删除
    batchDelete() {
      if (this.operateBtn.selected.length < 1) {
        this.$modal.msgWarning("请选择要批量删除的流程！");
        return;
      }
      this.operateBtn.deleteDialog = true;
    },
    //批量移动
    batchRemove() {
      if (this.operateBtn.selected.length < 1) {
        this.$modal.msgWarning("请选择要批量移动的流程！");
        return;
      }
      this.operateBtn.removeDialog = true;
    },
    singleRemove(row) {
      this.operateBtn.removeDialog = true;
      this.operateBtn.selected = [row];
    },
    singleDelete(row) {
      this.operateBtn.deleteDialog = true;
      this.operateBtn.selected = [row];
    },
    //批量移动确定操作
    submitRemove() {
      if (this.operateBtn.category.length == 0) {
        this.$message.warning("分组必填");
        return;
      }
      let params = {};
      params.category =
        this.operateBtn.category[this.operateBtn.category.length - 1];
      this.currentFormGroupId = params.category;
      params.ids = this.operateBtn.selected.map((item) => item.id);
      updateCategorys(params).then((res) => {
        this.$message.success("移动成功");
        this.queryParams.pageNo = 1;
        this.queryParams.pageSize = 10;
        this.cancelRemove();
      });
    },
    cancelRemove() {
      this.operateBtn.removeDialog = false;
      this.operateBtn.category = "";
      this.operateBtn.selected = [];
      this.getList();
    },
    //批量确定删除
    submitDelete() {
      let params = this.operateBtn.selected.map((item) => item.id);
      deleteForm(params).then((res) => {
        this.$message.success("删除成功");
        this.cancelDelete();
        this.queryParams.pageNo = 1;
        this.queryParams.pageSize = 10;
        this.getList();
      });
    },
    cancelDelete() {
      this.operateBtn.selected = [];
      this.operateBtn.deleteDialog = false;
    },
    //批量复制
    batchCopy() {
      if (this.operateBtn.selected.length < 1) {
        this.$modal.msgWarning("请选择要批量复制的流程！");
        return;
      }
      this.operateBtn.copyDialog = true;
    },
    submitCopy() {
      let formIds = this.operateBtn.selected.map((item) => item.id);
      copyFormDo(formIds).then((res) => {
        this.getList();
        this.$message.success("表单复制成功！");
        this.cancelCopy();
      });
    },
    cancelCopy() {
      this.operateBtn.selected = [];
      this.operateBtn.copyDialog = false;
    },
    //查看该流程下的所有版本
    lookProcessDetail(row) {
      this.$router.push({
        path: "/bpm/process-instance/look",
        query: {
          modelId: row.id,
        },
      });
    },
    foldTreeEvent() {
      this.foldPanelShow = !this.foldPanelShow;
    },
    nodeClicked(data, node) {
      this.currentFormGroupId = data.encode;
      this.queryParams.name = "";
      this.getList();
      this.parentList = [];
      this.platform(node);
    },
    platform(node) {
      if (!node.parent) {
        // 若无父节点，则直接返回
        return;
      }
      this.parentList.unshift(node.data.encode); // 将value保存起来
      //调用递归
      this.platform(node.parent);
    },
    //鼠标移入操作
    mouseover(data) {
      this.$set(data, "deleteShow", data.levels == 0 ? false : true);
      if (data.levels == 0 || data.levels > 3) {
        this.$set(data, "nodeShow", false);
      } else {
        this.$set(data, "nodeShow", true);
      }
    },
    mouseout(data) {
      this.$set(data, "deleteShow", false);
      this.$set(data, "nodeShow", false);
    },
    //新建根节点流程分组
    createRootGroup() {
      this.currentGroupOperateState = "create";
      this.expandedKeys = [this.treeData[0].encode];
      this.formGroupOperate.showDialog = true;
      this.formGroupOperate.title = "新建表单分组";
      this.formGroupOperate.form = {
        idParent: this.rootNodeData,
        parentLevels: 0,
      };
    },
    append(event, data, state) {
      event.stopPropagation();
      this.expandedKeys = [data.encode];
      this.currentGroupOperateState = state;
      this.formGroupOperate.showDialog = true;
      this.formGroupOperate.title = "新建表单分组";
      this.formGroupOperate.form = {
        idParent: data.id,
        parentLevels: data.levels,
      };
      this.formGroupOperate.form.isShow = data.id;
      this.formGroupOperate.form.parentName = data.nameGroup;
    },
    //编辑分组名称
    editGroup(event, data, state) {
      event.stopPropagation();
      this.expandedKeys = [data.encode];
      this.currentGroupOperateState = state;
      this.formGroupOperate.showDialog = true;
      this.formGroupOperate.title = "编辑表单分组";
      this.formGroupOperate.form = {
        id: data.id,
        nameGroup: data.nameGroup,
      };
    },

    remove(event, node, data) {
      event.stopPropagation();
      let parentId = node.parent.data.encode;
      this.expandedKeys = [parentId];
      deleteGroup(data.id).then((res) => {
        this.$message.success("删除成功");
        this.getTreeList();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.form-group {
  margin: 0 16px;

  .header-search {
    height: 56px;
    display: flex;
    align-items: center;

    .header-left {
      width: 20%;

      .fold-span {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 2px;
        border: 4px solid #2a67f4;
        cursor: pointer;
      }
    }

    .header-right {
      flex: 1;
      text-align: right;
    }
  }

  .main-content {
    min-height: 440px;
    display: flex;
    border: 1px solid #e8eaed;

    .left-tree {
      position: relative;
      width: 300px;
      padding: 0 8px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      border-right: 1px solid #e8eaed;

      .form-group-title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding: 0 8px;
        position: relative;

        &:nth-child(1) {
          font-size: 16px;
          font-family: Source Han Sans CN-Medium, Source Han Sans CN;
          font-weight: 600;
          color: #23272e;
        }

        .process-sort-icon {
          font-size: 20px;
          position: absolute;
          right: 0;
          top: 9px;
        }
      }

      .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;

        .el-icon-plus:before {
          color: #bfc5cd;
        }

        .el-icon-delete:before {
          color: #bfc5cd;
        }

        .el-icon-edit:before {
          color: #bfc5cd;
        }

        .mouseover-span {
          display: inline-block;
          text-align: end;
          padding-right: 12px;
          padding-left: 20px;
        }
      }

      .create-root-name {
        position: absolute;
        bottom: 12px;
        height: 42px;
        line-height: 42px;
        text-align: center;
        width: 93%;
        background: #f6f7f8;
        border-radius: 2px 2px 2px 2px;
        border: 1px solid #e3e5e8;
        cursor: pointer;

        :nth-child(2) {
          margin-left: 8px;
          font-size: 16px;
          font-weight: 500;
        }
      }
    }

    .right-table {
      flex-grow: 1;
      width: 0;
    }
  }
}

.svg-icon-size-one {
  font-size: 16px;
}

.svg-icon-margin-one {
  margin-top: 4px;
  margin-left: 4px;
}

.svg-icon-size-two {
  font-size: 20px;
}

.svg-icon-size-three {
  font-size: 24px;
}

.svg-icon-margin {
  margin-right: 10px;
}

.batch-delete {
  margin-left: 8px;
  font-size: 16px;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #23272e;
}

.batch-delete-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  span {
    margin-bottom: 10px;
  }
}

.batch-remove-content {
  display: flex;
  flex-direction: column;

  span {
    margin-bottom: 10px;
  }
}

.copy-span {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  text-align: center;
}

.open-doing::before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  margin-right: 8px;
  width: 8px;
  height: 8px;
  background: #ffa229;
}

.open-doing {
  display: inline-block;
  border-radius: 2px;
  padding: 3px 12px;
  border: 1px solid #e3e5e8;
}

// ::v-deep .el-tree-node:focus > .el-tree-node__content {
//   background-color: #ebf2fe;
//   color: #0047ea;
// }
</style>
